import * as Cesium from 'cesium';
/**
 * 点击弹窗工具类-Cesium.Viewer添加弹出窗口
 */

 export class PopUpOnWindowPosition {
    /**
     * 构造器-实例化PopUpOnWindowPosition
     * @param {Cesium.Viewer视图对象} _viewer
     * @param {PopUp弹出窗口id选择器} _popUpID
     */
    constructor(_viewer, _options = {}, _popUpID = undefined) {
      this.viewer = _viewer //Cesium.Viewer三维视图对象
      this.viewerContainer = _viewer.container //Cesium.Viewer所在DOM容器
      //判断当前弹出窗口DOM元素是否存在
      this.popWindowID = Cesium.defined(_popUpID) ? _popUpID : 'popupContainer'
      this.popWindow = document.getElementById(this.popWindowID)
      if (Cesium.defined(this.popWindow) == false) {
        //创建目标容器元素
        this.popWindow = document.createElement('div')
        console.log(this.popWindow)
        this.popWindow.id = this.popWindowID //设置ID属性值
        //设置目标容器样式
        this.popWindow.style.position = 'absolute'
        this.popWindow.style.top = '0px'
        this.popWindow.style.left = '0px'
        // console.log(_options.border)
        // console.log(this.popWindow.style.border)
        // this.popWindow.style.border = _options.border ?
        //     _options.border :
        //     '1px solid #cccccc'
        this.popWindow.style.backgroundColor = _options.backgroundColor
          ? _options.backgroundColor
          : '#134879'
        this.popWindow.style.padding = '15px'
        this.popWindow.style.display = 'none' //默认不显示当前弹出窗口
        //添加关闭按钮
        var btnCLose = document.createElement('div')
        //设置关闭按钮样式
        btnCLose.innerText = '关闭'
        btnCLose.style.display = 'inline-block'
        btnCLose.style.color = '#047ed1'
        // btnCLose.style.position = 'absolute'
        btnCLose.style.width = '32x'
        btnCLose.style.height = '24px'
        btnCLose.style.border = '1px solid blue'
        btnCLose.style.borderRadius = '5px'
        btnCLose.style.backgroundColor = '#45b97c'
        // // btnCLose.style.top = '-12px'
        // btnCLose.style.top = '-12px'
        //注册点击事件-关闭弹窗
        var _that = this
        btnCLose.addEventListener(
          'click',
          function (event) {
            //执行关闭弹窗操作
            _that.popWindow.style.display = 'none'
          },
          {
            once: false, //非一次调用
          }
        )
        //添加关闭按钮到弹出窗口中
        this.popWindow.appendChild(btnCLose)
        //将弹出窗添加到viewer.container容器中
        this.viewerContainer.appendChild(this.popWindow)
      }
    }
  
    /**
     *
     * @param {二维坐标点-Cesium.Cartesian2} _cartesian2
     * @param {弹出窗内容-HTML元素} _content
     */
    setPositon(_cartesian2, _content) {
      // if(Cesium.defined(_cartesian2)&&Cesium.defined(_content)){
      //   //提供位置和内容参数
      // }else if(Cesium.defined(_cartesian2)){
      //   //仅提供位置参数
      // }
      //先设置弹窗的显示位置
      console.log(_cartesian2)
      this.popWindow.style.left = _cartesian2.x + 'px' //窗口坐标-X轴
      this.popWindow.style.top = _cartesian2.y + 'px' //窗口坐标-Y轴
      //设置_content到弹窗中
      this.sethContent(_content)
      //设置弹窗可见
      this.popWindow.style.display = 'inline-block'
    }
  
    /**
     * 为popWindow弹窗面板提供内容
     * @param {DON元素中将要放置的内容} _content
     */
    sethContent(_content) {
      //查找是否存在可以放置_content内容的子元素
      var contentDiv = this.popWindow.querySelector('#contentDiv')
      if (Cesium.defined(contentDiv) == false) {
        //创建用于放置_content内容的div容器
        contentDiv = document.createElement('div')
        contentDiv.id = 'contentDiv'
        contentDiv.style.display = 'inline-block'
        //添加_content容器到父容器中
        this.popWindow.appendChild(contentDiv)
      } else {
        //如果存在-清空div容器的内容
        contentDiv.innerHTML = ''
      }
      //设置新的_content内容
      contentDiv.innerHTML = _content
        ? _content
        : '<span>Unknown content...</span>'
    }
  }
  
  